<template>
  <div class="index">
    <commonHeader></commonHeader>

    <div class="swiper-wrap">
      <swiper v-if="ListBanner.length" :options="swiperOption" class="swiper-container swiper-container1"
        ref="mySwiper">
        <swiper-slide class="swiper-item" v-for="(item, index) of ListBanner" :key="index">
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
      <div class="banner-text">
        <div class="text">资讯</div>
        <div class="introduct">惠元幸福医院品牌战略发布会</div>
      </div>
    </div>

    <!-- <div class="banner" v-if="ListBanner.length == 1">
      <img class="banner-img" :src="ListBanner[0].banner" alt="">
      <div class="banner-text">
        <div class="text">资讯</div>
        <div class="introduct">
          惠元幸福医院品牌战略发布会
        </div>
      </div>
    </div> -->

    <div class="news-tab">
      <div :class="['item', { active: active == item.id }]" @click="cutNews(item.id)" v-for="(item, index) in newsTab"
        :key="index">
        {{ item.name }}
      </div>
    </div>

    <div class="news bangxin">
      <div class="news-con-top">
        <div class="news-left">
          <router-link class="link" :to="{
              path: '/hello/newsDetail',
              query: { id: newsListTop[0].id },
            }" v-if="newsListTop[0]">
            <div class="bg-img-wrap">
              <div class="shadow"></div>
              <img class="img" :src="newsListTop[0].picture" alt="" />
            </div>
            <div class="info">
              <div class="tit-small">{{ newsListTop[0].name }}</div>
              <div class="tit-big ellipsis_two_line">
                {{ newsListTop[0].title }}
              </div>
              <div class="introduct ellipsis_two_line">
                {{ newsListTop[0].description }}
              </div>
            </div>
          </router-link>
        </div>
        <div class="news-right">
          <router-link class="link" :to="{
              path: '/hello/newsDetail',
              query: { id: newsListTop[1].id },
            }" v-if="newsListTop[1]">
            <div class="text">
              <div class="info">
                <div class="tit-small">{{ newsListTop[1].name }}</div>
                <div class="tit-big ellipsis_two_line">
                  {{ newsListTop[1].title }}
                </div>
                <div class="introduct ellipsis_two_line">
                  {{ newsListTop[1].description }}
                </div>
                <div class="dot">...</div>
              </div>
            </div>
            <img class="img" :src="newsListTop[1].picture" alt="" />
          </router-link>
          <router-link class="link" :to="{
              path: '/hello/newsDetail',
              query: { id: newsListTop[2].id },
            }" v-if="newsListTop[2]">
            <div class="text">
              <div class="info">
                <div class="tit-small">{{ newsListTop[2].name }}</div>
                <div class="tit-big ellipsis_two_line">
                  {{ newsListTop[2].title }}
                </div>
                <div class="introduct ellipsis_two_line">
                  {{ newsListTop[2].description }}
                </div>
                <div class="dot">...</div>
              </div>
            </div>
            <img class="img" :src="newsListTop[2].picture" alt="" />
          </router-link>
        </div>
      </div>
      <div class="news-other">
        <router-link class="link" :to="{ path: '/hello/newsDetail', query: { id: item.id } }"
          v-for="(item, index) in newsList" :key="index">
          <div class="text">
            <div class="info">
              <div class="tit-small">{{ item.name }}</div>
              <div class="tit-big ellipsis_two_line">{{ item.title }}</div>
              <div class="introduct ellipsis_two_line">
                {{ item.description }}
              </div>
              <div class="dot">...</div>
            </div>
          </div>
          <img class="img" :src="item.picture" alt="" />
        </router-link>
      </div>
    </div>

    <commonFooter></commonFooter>
  </div>
</template>

<script lang="ts">
  // ajax
  import {
    HelloChildBanner,
    Classify,
    NewsList,
    NewsListTop,
  } from "@/assets/js/api";

  import { Component, Vue } from "vue-property-decorator";
  import commonHeader from "@/components/headers.vue";
  import commonFooter from "@/components/footer.vue";

  @Component({
    name: "news",
    components: {
      commonHeader,
      commonFooter,
    },
  })


  export default class news extends Vue {
    active = -1;
    // banner
    ListBanner = [];
    newsTab = [];
    // 置顶新闻
    newsListTop = [];
    // 非置顶新闻
    newsList = [];

    swiperOption = {
      // 参数选项,显示小点
      pagination: ".swiper-pagination",
      paginationClickable: true,
      //循环
      loop: true,
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
    };


    get swiper(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper.$swiper;
    }

    cutNews(id: number) {
      this.active = id;
      this.NewsListFun(this.active);
    }

    // 新闻列表
    NewsListFun(id: number) {
      NewsList({ id: id }).then((response) => {
        console.log(response.data, "新闻列表");
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.newsList = data[0].ListNews;
          }
        }
      });
    }






    mounted() {
      let parameter = {
        bannerposition: 9,
        typename: "你好惠元-新闻管理",
      };
      // banner
      HelloChildBanner(parameter).then((response) => {
        // console.log(response.data, "HelloChildBanner")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner = data[0].ListBanner;
          }
        }
      });

      // 置顶新闻
      NewsListTop().then((response) => {
        console.log(response.data, "置顶新闻");
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            // this.ListBanner = data[0].ListBanner;
            this.newsListTop = data;

          }
        }
      })

      // 新闻tab标题
      Classify({ type: 1 }).then((response) => {
        console.log(response.data, "Classify");
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.newsTab = data;
            this.active = this.newsTab[0].id;
            this.NewsListFun(this.active);
          }
        }
      });
    }

    // watch: {
    //   // 刷新页面
    //   $route(to, from) {
    //     this.$router.go(0)
    //   }
    // }
  }
</script>


<style lang="scss" scoped>
  @import "~@/assets/scss/news.scss";
</style>